<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.15.9/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="body">
        <div id="index">
            <div class="contenter">
                <h1 style="text-align: center;">{{name}}</h1>
                <el-button type="primary" @click="submit" class="btn">抽奖</el-button>
                <el-table :data="tableData" style="margin: 0 auto;display: block;">
                    <el-table-column prop="grade" label="等级" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="number" label="数量" width="180">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>

</body>
<div id="app">

</div>
<script>
    new Vue({
        el: '#index',
        data () {
            return {
                name: '无',
                form: {
                    name: "",
                    password: "",
                },
                tableData: [
                    {
                        'grade': '一等奖',
                        'name': 'aaa',
                        'number': 1
                    }
                ]
            }
        },
        created () {
            this.query()
        }
        ,
        methods: {
            query () {
                axios({
                    url: '/query',
                    method: 'post',
                }).then(res => {
                    this.tableData = res.data
                })
            },
            submit () {
                axios({
                    url: '/luckyDraw',
                    method: 'post',
                    data: this.form
                }).then(res => {
                    this.name = res.data
                    this.$alert(res.data, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                            });
                        }
                    })
                    this.query()
                }).catch(res => {
                    this.$alert('没中奖', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                            });
                        }
                    })
                })
            },


        },

    });
</script>
<style>
    .body {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        background-image: url("static/p2.jpg");
    }

    #index {
        margin: 0 auto;
        width: 1200px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn {
        margin: 0 auto;
        display: block;
    }
</style>

</html>